<template>
  <div class="my-container">
    <div class="my-item">
      <div class="left">单位名称：</div>
      <div class="right">{{ formData.companyName }}</div>
    </div>
    <div class="my-item">
      <div class="left">用户名称：</div>
      <div class="right">{{ formData.nickname }}</div>
    </div>
    <div class="my-item">
      <div class="left">绑定手机：</div>
      <div class="mima right">
        <div class="phoneTxt">{{ formData.mobile }}</div>
        <div class="mimaTxt" @click="goModify">修改密码</div>
      </div>
    </div>
    <!-- <div class="my-item">
      <div class="left">单位地址：</div>
      <div class="right">{{ formData.address }}</div>
    </div> -->

    <div class="bottomBtn">
      <van-button @click="logout" round block type="info" native-type="submit"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { logout } from "../utils/api";
export default {
  data() {
    return {
      formData: {
        companyName: "",
        nickname: "",
        mobile: "",
        address: "",
      },
    };
  },
  created() {
    let userData = JSON.parse(localStorage.getItem("useroBJ"));
    this.formData = {
      companyName: userData.companyName,
      nickname: userData.nickName,
      mobile: userData.phonenumber,
      address: userData.companyName,
    };
  },
  mounted() {},
  methods: {
    goModify() {
      this.$router.push({ path: "/password" });
    },
    async logout() {
      const { data } = await logout();
      if (data.code == 200) {
        this.$router.push({ path: "/login" });
        localStorage.removeItem("token");
        localStorage.removeItem("useroBJ");
      } else {
        Toast(data.msg);
      }
    },
  },
};
</script>

<style lang="less">
.my-container {
  padding: 20px;
  text-align: left;
  margin-top: 60px;
  .my-item {
    display: flex;
    margin-bottom: 20px;
    .left {
      width: 25%;
    }
    .right {
      width: 75%;
    }
  }
  .bottomBtn {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .mima {
    display: flex;
    justify-content: space-between;
  }
  .phoneTxt {
    // line-height: 30px;
  }
  .mimaTxt {
    color: #1989fa;
  }
}
</style>
